import * as React from 'react';
import { trim } from 'lodash';
import { Modal, Icon, Steps, Button, Tooltip } from 'antd';
import './ItemList.scss';

const { Step } = Steps;

function tryTrim(input: any) {
  return input ? trim(input) : '';
}

interface ListProps {
  items: any[];
  onEdit: (id: number) => any;
  onSort: () => any;
  onRemove: (id: number) => any;
  parentId: number;
  activeId: number;
  title: string;
}
interface ListState {
  activeNodeId: number;
}

export default class ItemList extends React.Component<ListProps, ListState> {
  static defaultProps: ListProps = {
    items: [],
    onEdit: () => {},
    onSort: () => {},
    onRemove: () => {},
    parentId: 0,
    activeId: 0,
    title: '',
  };
  constructor(props: ListProps) {
    super(props);
    this.state = {
      activeNodeId: props.activeId,
    };
  }

  componentWillReceiveProps(nextProps: any) {
    const { parentId, activeId } = nextProps;
    const { parentId: oldParentId, activeId: oldActiveId } = this.props;
    if (parentId !== oldParentId) {
      this.handleEdit(0);
    } else {
      if (activeId !== oldActiveId && activeId) {
        this.handleEdit(activeId);
      }
    }
  }

  handleEdit = (activeNodeId: any = 0) => {
    this.setState({
      activeNodeId,
    });
    this.props.onEdit(activeNodeId);
  };

  handleRemove = (itemId: number) => {
    Modal.confirm({
      title: '危险，慎重操作',
      content: '你确定要删除这个页面吗？',
      okText: '确定',
      cancelText: '取消',
      iconType: 'info-circle',
      onOk: () => {
        this.props.onRemove(itemId);
      },
    });
  };

  renderNotFound() {
    const { title } = this.props;
    return (
      <Steps direction="vertical" size="small" current={0}>
        <Step
          title={
            <span
              style={{
                color: '#dddddd',
                fontWeight: 'normal',
              }}>
              Not found.
            </span>
          }
          status="wait"
        />
        <Step
          key="new page"
          title={
            <Button
              size="small"
              type="ghost"
              onClick={(e: any) => {
                e.preventDefault();
                this.handleEdit(0);
              }}
              icon="plus">
              新增
              {title}
            </Button>
          }
        />
      </Steps>
    );
  }

  renderItems = () => {
    const { items, onSort, title } = this.props;
    const { activeNodeId } = this.state;

    const itemLayout = items.map((item: any) => {
      const name = tryTrim(item['name']);

      const style = {
        style: {
          color: name ? '' : '#FFC107',
        },
      };

      return (
        <Step
          id="step_content"
          key={item.id}
          title={
            <React.Fragment>
              <a
                {...style}
                onClick={(e: any) => {
                  e.preventDefault();
                  this.handleEdit(item.id);
                }}
                href="javascript:void(0);">
                {name || '* 名称未填写'}
              </a>
              &nbsp;
              {activeNodeId === item.id && (
                <Tooltip overlay="删除页面">
                  <Icon
                    className="del-icon"
                    type="minus-circle"
                    onClick={() => {
                      this.handleRemove(item.id);
                    }}
                  />
                </Tooltip>
              )}
            </React.Fragment>
          }
          status={activeNodeId === item.id ? 'process' : 'wait'}
        />
      );
    });

    return (
      <>
        <Step
          id="step_action"
          key="new item"
          title={
            <Button.Group>
              {items.length > 1 && (
                <Tooltip overlay="排序">
                  <Button
                    onClick={() => {
                      onSort();
                    }}
                    size="small"
                    type="ghost"
                    icon="bars"
                  />
                </Tooltip>
              )}
              <Tooltip overlay={`新增${title}`}>
                <Button
                  onClick={() => {
                    this.handleEdit(0);
                  }}
                  size="small"
                  type="ghost"
                  icon="plus"
                />
              </Tooltip>
            </Button.Group>
          }
        />
        <Steps direction="vertical" size="small" current={0}>
          {itemLayout}
        </Steps>
      </>
    );
  };

  render() {
    return this.props.items.length > 0 ? this.renderItems() : this.renderNotFound();
  }
}
